<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		/* 适用于所有设备，优先级也是最低的 */
		@media all {
			section {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		}

		/* 适用于屏幕模式下（pc + iPhone +iPad ...） */
		@media screen {
			section {
				width: 300px;
				height: 300px;
				background-color: gold;
			}
		}

		/* 适用于打印预览模式下，无特定要求，一般直接写样式即可，上面的媒体类型(all、screen)可不写，只有在特定的模式下（print）单独写一套样式 */
		@media print {
			section {
				width: 400px;
				height: 400px;
				font-size: 30px;
				background-color: salmon;
				color: white;
			}
		}
	</style>
</head>

<body>
	<section>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. In accusamus ab ullam?
	</section>
</body>

</html>